Naučeno gradivo: Linkovi u naslovima lekcija
Prva lekcija - Flexbox
Flexbox (Flexible Box Layout) je CSS model za raspoređivanje elemenata unutar kontejnera. Koristi se kada želiš: da elemente rasporediš u red ili kolonu, da ih centriraš, da napraviš fleksibilan raspored bez float-a. Kad uključiš flex, dobiješ dvije ose: Glavna osa (main axis). Podrazumijevano ide horizontalno (u red). Sporedna osa (cross axis). Uvijek je okomita na glavnu osu.
Druga lekcija - Flex grow i shrink
flex-grow: Određuje koliko element smije da raste ako ima slobodnog prostora, Ako je flex-grow: 0 → element NE raste. flex-shrink: Određuje koliko element smije da se smanjuje kada nema dovoljno prostora: 1 → smanjuje se normalno (default), 0 → neće se smanjivati. Primjer: Ako imaš 3 elementa i nema mjesta, oni će se smanjiti proporcionalno prema shrink vrijednosti.
Treća lekcija - flex wrap basis flex
flex-wrap: Po defaultu svi elementi pokušavaju stati u jedan red. Vrijednosti: nowrap (default), wrap, wrap-reverse. flex-basis: Određuje početnu veličinu elementa prije grow/shrink računanja, To znači: Element počinje sa 200px širine (ako je row). Može biti: px, %, auto. Skraćeni zapis: flex, Redoslijed je: flex: grow shrink basis; Primjer: flex: 1; To znači flex: 1 1 0;
Četvrta lekcija - Ravnanje elemenata po glavnoj i sporednoj osi
Ravnanje po glavnoj osi: uz pomoću justify-content, Vrijednosti: flex-start (početak), flex-end (kraj), center, space-between, space-around, space-evenly. Ovo pomjera elemente LIJEVO–DESNO (ako je row). Ravnanje po sporednoj osi: align-items: Vrijednosti: stretch (default), flex-start, flex-end, center, baseline, Ovo ih pomjera GORE–DOLJE (ako je row).
Peta lekcija - Order
flex-order: Omogućava promjenu redoslijeda elemenata BEZ promjene HTML-a. Primjer: .item1 { order: 2; }, .item2 { order: 1; } Item2 će se prikazati prije Item1.